import React from "react";
import { Typography, Button, Form, Input, message } from "antd";
// antd的小图标
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import "./index.less";
import { useNavigate } from "react-router-dom";

import { loginApi } from "../../api/index";

// 引入axios，用于数据请求
// import axios from "axios";

// const { Title } = Typography;

const Index = () => {
  // const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();

  const onFinish = (values) => {
    loginApi({
      adminname: values.username,
      password: values.password,
    }).then((res) => {
      if (res) {
        console.log(res);
        message.success("登录成功");
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("adminname", res.data.adminname);
        localStorage.setItem(
          "checkedkeys",
          JSON.stringify(res.data.checkedkeys)
        );
        navigate("/home");
      }
    });

    // console.log(values);
    // 这里去做登录请求
    // 安装axios来进行数据请求
    // axios
    //   .post("http://121.89.205.189:3000/admin/admin/login", {
    //     adminname: values.username,
    //     password: values.password,
    //   })
    //   .then((res) => {
    //     // then的response就是请求成功以后返回的内容
    //     console.log(res.data);
    //     // code等于200表示成功，不等于200表示失败
    //     if (res.data.code === "200") {
    //       // messageApi.open({
    //       //   type: "success",
    //       //   content: res.data.message,
    //       // });
    //       // 存token，存到本地存储中
    //       localStorage.setItem("token", res.data.data.token);
    //       localStorage.setItem("adminname", res.data.data.adminname);
    //       navigate("/home");
    //     } else {
    //       messageApi.open({
    //         type: "error",
    //         content: res.data.message,
    //       });
    //     }
    //   })
    //   .catch((error) => {
    //     // catch表示请求失败的错误
    //     console.log(error);
    //   });
  };

  return (
    <div className="loginWrap">
      {/* {contextHolder} */}
      <Typography.Title level={3} style={{ textAlign: "center" }}>
        嗨购后台管理系统
      </Typography.Title>

      {/* onFinish函数会在submit的按钮被点击的时候自动触发 */}
      <Form
        name="normal_login"
        className="login-form"
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item
          // name属性对应的是最后输出的对象的key
          name="username"
          // rules属性是form的校验规则
          rules={[{ required: true, message: "请输入用户名!" }]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="Username"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: "请输入密码!" }]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="Password"
          />
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            style={{ width: "100%" }}
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Index;
